<template>
  <div>
    <Tabs :tool-tab-data="tabs"
          @input="handerTabs" />
    <div class="keep-body">
      <keep-alive>
        <component :is="componentName"
                   v-bind="$attrs"
                   v-on="$listeners" />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Tabs from "@/components/tabs/Index";
import Carload from './Carload.vue'
import Vehicle from './Vehicle.vue'

export default {
  name: 'TransportComponent',
  components: { Carload, Vehicle, Tabs },
  data () {
    return {
      componentName: 'Carload',
      tabs: [
        {
          label: '零担',
          value: 'Carload'
        },
        {
          label: '整车',
          value: 'Vehicle'
        }
      ]
    }
  },
  methods: {
    handerTabs (item) {
      this.componentName = item.value
    }
  }
}
</script>

<style scoped>
.keep-body {
  padding-top: 10px;
}
</style>